<template>
  <div>
    <el-dialog
      title="一键导入数据"
      :visible="visible"
      width="400px"
      :before-close="doClose"
      class="export-standard-speech"
    >
      <div
        v-if="!importResponse"
        class="standard-export"
      >
        <template v-if="templateUrl">
          <div class="x-fw-lg x-mt">
            下载导入模板
          </div>
          <div class="x-fs-sm x-text-light">
            根据提示完善表格内容
          </div>
          <div class="x-primary">
            点击下载
          </div>
        </template>
        <div class="x-fw-lg x-mt">
          上传完善后的表格
        </div>
        <el-upload
          ref="upload"
          class="upload-demo-xls"
          drag
          action=""
          :file-list="fileList"
          :auto-upload="false"
          :show-file-list="false"
          accept=".xls,.xlsx,.csv"
          :on-change="handleChange"
        >
          <div
            v-if="!file"
            class="x-flexp-jcai x-h-100"
          >
            将文件拖到此处，或点击<em class="x-primary">上传</em>
          </div>
          <div
            v-else
            class="x-h-100 x-flexp-jcai x-flexp-column"
          >
            <span class="x-fs-base">{{ file && file.name }}</span>
            <span class="x-fs-base x-text-light">（{{ `${Number(file.size / 1024).toFixed(2)}K` }}）</span>
            <span class="x-fs-base x-primary">重新选择</span>
          </div>
        </el-upload>
        <div class="x-mt x-flexp-jcai">
          <el-button
            class="x-ml"
            @click.native="doClose"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            class="x-ml"
            :disabled="!file"
            @click.native="doExport"
          >
            导入
          </el-button>
        </div>
      </div>
      <div v-if="importResponse">
        <slot
          name="result"
          :response="importResponse"
        >
          <view
            v-if="importResponse._error"
            class="x-error"
          >
            导入出错
          </view>
        </slot>
        <view class="x-mt">
          <el-button
            type="primary"
            class="x-ml"
            :disabled="!file"
            @click.native="doClose"
          >
            关闭
          </el-button>
        </view>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'XImport',
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      templateUrl: {
        type: String,
        default: '',
      },
      importUrl:{
        type: String,
        default: '',
      },
      importData:{
        type: Object,
        default:() => {
          return {}
        }
      },
      response: {
        type: Function,
        default: null
      }
    },
    data () {
      return {
        dialogVisible: false,
        fileList: [],
        file: null,
        importResponse: null,
      };
    },
    methods: {
      // 取消或者清空上传的文件和数据
      doClose(){
        this.$refs.upload&&this.$refs.upload.clearFiles()
        this.fileList = []
        this.file = null
        this.importResponse = null
        this.$emit('close')
      },
      handleChange(file, fileList){
        // console.log(file);
        // let extension = file.raw.name.substring(file.raw.name.lastIndexOf(".") + 1);
        let size = file.size / 1024 / 1024;
        if (size > 100) {
          this.$message.warning("文件过大，请进行拆分后分多次上传");
          this.$refs.upload.clearFiles()
          return false
        }
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]  // 这一步，是展示最后一次选择的csv文件
          this.file = this.fileList[0].raw
        }
      },
      doExport(){
        this.$x.request.upload({
          url: this.importUrl,
          file: this.file,
          data: this.importData,
          timeout: 12000000
        }).then(res => {
          if(this.response) {
            this.response(res, (res)=>{
              this.importResponse = res
            })
          }else{
            this.importResponse = res
          }
        }).catch(error=>{
          this.importResponse = {
            _error: error
          }
        })
      },
    },
  }
</script>

<style  lang="scss" scoped>

</style>

